<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist功能开发</title>
    <script src="vue.js"></script>
</head>
<body>
    
    <div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item>
        </ul>
    </div>

    <script>

        // 任何一个vue的项目都是由千千万万个Vue的实例构成的

        // 每一个vue的组件又是一个Vue的实例
        Vue.component('todo-item', {
            props: ['content'],                
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {              //每个组件中也可以写data，computed等，所以每个vue的组件都是一个Vue的实例
                handleClick: function() {
                    alert("雷猴")
                }
            }
        })


        new Vue({
            el: "#root",
            data: {
                inputValue: '',
                list: []
            },
            //对于一个根实例(不定义template: )，会把挂载点下的所有内容当作这个实例的模版使用
            methods: {
                handleSubmit: function() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>

</body>
</html>